<template>
  <div class='content'>
    <div class="bg">
      <img src="../assets/icon6.png" alt="">
    </div>
    <div class="info">
      <div class='title'>
        授权<span>南京地铁</span>获取您的身份信息<span>（姓名、证件号）</span>及以下信息为您提供相关服务
      </div>
      <div class="phone">
        <span class='label'>手机号</span>
        <span>180****8989</span>
      </div>
    </div>
    <div class="buttons">
      <van-button>暂不授权</van-button>
      <van-button class='on'>确认授权</van-button>
    </div>
  </div>
</template>

<script>
  export default {
    
  }
</script>

<style lang="scss" scoped>
.content{
  height: 100vh;
  font-family: PingFangSC-Regular, PingFang SC;
  position: relative;
  .bg{
    background: url('../assets/bg.png') no-repeat;
    background-size: 100% auto;
    height:190px;
    display: flex;
    justify-content: center;
    align-items: center;
    img{
      width:90px;
      height:90px;
    }
  }
  .info{
    box-sizing: border-box;
    padding:16px 20px;
    .title{
      font-size: 14px;
      font-weight: 400;
      color: #666;
      span{
        color: #333;
        font-weight: 600;
        margin:0 5px;
      }
    }
    .phone{
      height:50px;
      padding:0 16px;
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      font-weight: 400;
      color: #666;
      background: #fff;
      box-shadow: 0px 2px 7px 0px rgba(192,216,255,0.29);
      border-radius: 6px;
      border: 1px solid #F2F3F5;
      align-items: center;
      margin-top: 26px;
      .label{
        font-weight: 500;
        color: #333;
      }
    }
  }
  .buttons{
    width:calc(100vw - 30px);
    left: 15px;
    position: absolute;
    bottom:20px;
    display: flex;
    justify-content: space-between;
    button{
      width:calc(50% - 7.5px);
      border-radius: 5px;
      border: 1px solid #0064F4;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #0064F4;
      &.on{
        border:1px solid #1876FF;
        background: linear-gradient(137deg, #318BFF 0%, #1876FF 100%);
        color: #fff;
        border-radius: 5px;
      }
    }
  }
}
</style>